<template>
    <view class="toClassify">
        <Navigation title="砍价" background="#FABB3C" titleColor="#fff" />
        <view class="top-box ph-24 pv-14 f ai-c jc-s-b">
            <view class="f f1">
                <view class="search w-f">
                    <u-search
                        placeholder="快速查找戳我"
                        v-model="queryParams.keyword"
                        height="30"
                        bgColor="#FFFFFF"
                        searchIconColor="#999"
                        placeholderColor="#999"
                        clearabled
                        :showAction="false"
                    >
                    </u-search>
                    <view class="w-100 search-btn"><u-button text="搜索" color="#FABB3C" shape="circle" @click.stop="handelSearch"></u-button></view>
                </view>
            </view>
			<view class="meKan" @click="toMy">我的砍价</view>
            <!-- <view class="w-40 h-40 ml-24 cart" @click="toCart">
                <image src="http://cwht.ricecs.cn/app/shop/cart.png" class="w-40 h-40"></image>
                <view class="w-20 h-20 b-20" v-show="cartCount > 0"></view>
            </view> -->
        </view>

        <view class="f list">
            <!-- <scroll-view scroll-y="true" :style="{ height: height + 'px' }" class="box w-150">
                <view class="w-150">
                    <view
                        v-for="(item, index) in classify"
                        :key="index"
                        class="w-150 h-96 f ai-c jc-c fs-24 text-color4"
                        :class="typeCurt == index ? 'active' : ''"
                        @click="changeClassify(index)"
                    >
                        {{ item.name }}
                    </view>
                </view>
            </scroll-view> -->
            <view class="f f1 fd-c">
                <!-- <view class="h-80 w-f">
                    <u-tabs
                        :list="twoClassify"
                        lineColor="#FABB3C"
                        :activeStyle="{ fontSize: '28rpx', color: '#222222', fontWeight: '600' }"
                        :inactiveStyle="{ fontSize: '28rpx', color: '#999999' }"
                        @click="changeTwoClassify"
                        :current="twoCurt"
                    >
                    </u-tabs>
                </view> -->
                <scroll-view
                    scroll-y="true"
                    :style="{ height: height + 'px' }"
                    @scrolltolower="scrolltolower"
                    :refresher-enabled="isOpenRefresh"
                    :refresher-triggered="triggered"
                    @refresherpulling="onPulling"
                    @refresherrefresh="onRefresh"
                >
                    <view class="f jc-s-b mt-20 ph-16">
                        <view class="mr-16">
                            <view v-for="(item, index) in listL" :key="index" class="w-343 b-24 ph-8 pt-8 pb-20 goods mb-16" @click="toDetail(item)">
                                <image :src="item.picUrl" class="w-343 b-24" mode="widthFix"></image>
                                <view class="ph-12">
                                    <view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
                                    <view class="f ai-c mr-8">
                                        <view class="w-60 h-32 b-4 fs-22 text-color5 lowest f ai-c jc-c">最低</view>
                                        <view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.bargainMinPrice }} </view>
                                    </view>
                                    <view class="fs-22 text-color3 old-price">¥{{ item.originalPrice }}</view>
                                </view>
                            </view>
                        </view>
                        <view>
                            <view v-for="(item, index) in listR" :key="index" class="w-343 b-24 ph-8 pt-8 pb-20 goods mb-16" @click="toDetail(item)">
                                <image :src="item.picUrl" class="w-343 b-24" mode="widthFix"></image>
                                <view class="ph-12">
                                    <view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
                                    <view class="f ai-c mr-8">
                                        <view class="w-60 h-32 b-4 fs-22 text-color5 lowest f ai-c jc-c">最低</view>
                                        <view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.bargainMinPrice }} </view>
                                    </view>
                                    <view class="fs-22 text-color3 old-price">¥{{ item.originalPrice }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { categoryFirstList, categorySecondList, bargainActivityPage, categoryTopList } from '@/services/api/shop/index';
import { cartGetCount } from '@/services/api/shop/cart';
const { proxy } = getCurrentInstance();
const classify = ref<any[]>([]);
const typeCurt = ref(0);
const twoClassify = ref<any[]>([]);
const twoCurt = ref(0);
const isOpenRefresh = ref(true);
const triggered = ref(false);
const queryParams = ref({
    type: 2,
    sortAsc: true,
    pageNo: 1,
    pageSize: 10,
    firstCategoryId: null,
    secondCategoryId: null,
    keyword: '',
});
const listL = ref<any>([]);
const listR = ref<any>([]);
const cartCount = ref(0);
const timeData = ref({});

onShow(() => {
    // getCategoryFirstList();
    getCartCount();
});
onLoad(() => {
    listL.value = [];
    listR.value = [];
    queryParams.value.pageNo = 1;
    getSpuPage();
});
const onChange = (e: any) => {
    timeData.value = e;
};
function toMy(){
	uni.navigateTo({
	    url: '/pages_mine/bargainList',
	});
}
function toCart() {
    uni.navigateTo({
        url: '/pages_shop/shopCart/index',
    });
}
//获取购物车数量
async function getCartCount() {
    const { data } = await cartGetCount({});
    cartCount.value = data;
}
//搜索
function handelSearch() {
    listL.value = [];
    listR.value = [];
    queryParams.value.pageNo = 1;
    getSpuPage();
}
//下拉刷新
function onPulling(e: any) {
    if (e.detail.deltaY < 0) return;
    triggered.value = true;
}
function onRefresh() {
    triggered.value = false;
    listL.value = [];
    listR.value = [];
    queryParams.value.pageNo = 1;
    getSpuPage();
}
//上拉加载
function scrolltolower() {
    queryParams.value.pageNo++;
    getSpuPage();
}
//获取商品
async function getSpuPage() {
    const { data } = await bargainActivityPage(queryParams.value);
    if (data.list.length > 0) {
        data.list.forEach((item: any, index: number) => {
			item.picUrl = item.picUrl.split(',')[0]
            if (index % 2 === 0) {
                listL.value.push(item);
            } else {
                listR.value.push(item);
            }
        });
    }
}

//获取一级分类
// async function getCategoryFirstList() {
//     const topcategory = await categoryTopList({ type: 0, spuType: 6 });
//     const topCategoryIds = topcategory.data.map((item: any) => {
//         return item.id;
//     });
//     const { data } = await categoryFirstList({ type: 0, spuType: 6, topCategoryIds });
//     classify.value = data;
//     if (classify.value.length > 0) {
//         typeCurt.value = 0;
//         getCategorySecondList();
//     }
// }

// //获取二级分类
// async function getCategorySecondList() {
//     queryParams.value.firstCategoryId = classify.value[typeCurt.value].id;
//     const { data } = await categorySecondList({ type: 0, spuType: 6, parentId: queryParams.value.firstCategoryId });
//     twoCurt.value = 0;
//     twoClassify.value = data;
//     queryParams.value.secondCategoryId = twoClassify.value[twoCurt.value].id;
//     listL.value = [];
//     listR.value = [];
//     getSpuPage();
// }
// //切换二级分类
// function changeTwoClassify(data: any) {
//     twoCurt.value = data.index;
//     queryParams.value.secondCategoryId = twoClassify.value[twoCurt.value].id;
//     listL.value = [];
//     listR.value = [];
//     getSpuPage();
// }
// //切换一级分类
// function changeClassify(index: number) {
//     typeCurt.value = index;
//     getCategorySecondList();
// }

const toDetail = (data: any) => {
    uni.navigateTo({
        url: `/pages_shop/bargainDetail/index?id=${data.id}`,
    });
};
uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#ffffff',
});
let systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
let pageHeight = systemInfo.windowHeight;
const height = pageHeight - statusBarHeight - 46 - 43;

</script>

<style lang="scss" scoped>
	.meKan{
		background: #f54040;
		color:red;
		width: 162rpx;
		height: 62rpx;
		text-align: center;
		line-height: 62rpx;
		color:#fff;
		font-size: 24rpx;
		margin-left: 20rpx;
		border-radius: 62rpx;
	}
.toClassify {
    .goods {
        background: #f5f5f5;
    }
    .lowest {
        background: #f54040;
    }
    .old-price {
        text-decoration: line-through;
    }
    .list {
        .box {
            background: #f5f5f5;
            height: 100%;
        }
        .list-content {
            height: 100%;
        }
        .list-box {
            height: 100%;
            .text {
                border: 2rpx solid #f0f0f0;
            }
        }
        .active {
            background: #fff;
            color: #fabb3c;
            position: relative;
        }
        .active::after {
            position: absolute;
            background: #fabb3c;
            height: 40rpx;
            width: 6rpx;
            top: 50%;
            margin-top: -20rpx;
            left: 0;
            content: '';
        }
    }
    .top-box {
        background: #fabb3c;
    }
    .cart {
        position: relative;
        view {
            background: #f54040;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
        }
    }
    .search {
        position: relative;
        background: #fabb3c;
        .search-btn {
            position: absolute;
            right: 6rpx;
            top: 6rpx;
            z-index: 11;
        }
        ::v-deep .u-button__text {
            font-size: 22rpx !important;
            font-weight: 400 !important;
        }
        ::v-deep .u-button {
            height: 48rpx !important;
        }
    }
}
</style>
